<template>
  <BasePage>
    <!-- 头部 -->
    <BasePageHeader :title="$t('document.title')">
      <BaseBreadcrumb>
        <BaseBreadcrumbItem :title="$t('general.home')" to="home" />
        <BaseBreadcrumbItem :title="$t('document.title')" to="#" active />
      </BaseBreadcrumb>

      <template #actions>
        <div class="flex items-center justify-end space-x-5">
          <BaseButton
            @click="$router.push('/document/create')"
          >
            <template #left="slotProps">
              <BaseIcon name="PlusIcon" :class="slotProps.class" />
            </template>
            {{ $t('document.add') }}
          </BaseButton>
          
        </div>
      </template>
    </BasePageHeader>

    <BaseTable 
      ref="table"
      :data="fetchData"
      :columns="columns"
      :placeholder-count="documentStore.total_count >= 20 ? 10 : 5"
      class="mt-3"
    >
      <template #cell-termodel="{ row }">
        {{ show_ter_model_name(row.data.termodel) }}
      </template>

      <template #cell-status="{ row }">
        <BaseStatus :status="row.data.status"/>
      </template>

      <template #cell-actions="{ row }">
        <DocumentIdxDropdown 
          :row="row.data"
          :load-data="refreshTable"
        />
      </template>
    </BaseTable>

  </BasePage>
</template>

<script setup>
import { computed, reactive, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { find } from 'lodash'
// pinia
import { useDocumentStore } from '@/stores/document'
import { useTermodelStore } from '@/stores/termodel'
// template
import DocumentIdxDropdown from '@/biz-components/dropdowns/DocumentIdxDropdown.vue'

const { t } = useI18n()

const documentStore = useDocumentStore()
const termodelStore = useTermodelStore()

const columns = computed(() => {
  return [
    { key: 'id', label: t('general.id') },
    {
      key: 'title',
      label: t('document.cloumn.title'),
      thClass: 'extra',
      tdClass: 'font-medium text-gray-900',
    },
    { key: 'termodel', label: t('document.cloumn.termodel'), sortable: false },
    { key: 'status', label: t('general.status.title'), sortable: false },
    {
      key: 'actions',
      label: '',
      tdClass: 'text-right text-sm font-medium',
      sortable: false,
    },
  ]
})

const show_ter_model_name = (termodel) => {
  const model = find(termodelStore.termodels, {id: termodel})
  return model ? model?.model : ''
}

// 删除
function delDocument(id) {
  console.log('delDocument: ', id)

}

// -------------------------- table ------------------------------
const table = ref(null)
const isFetchingInitialData = ref(false)

function refreshTable() {
  table.value && table.value.refresh()
}

const filters = reactive({
  title: null,
  termodel: null,
  status: null
})

const isInitParam = ref(false) 

async function fetchData({ page, filter, sort, limit }) {
  let data = Object.assign(filters, {
    order_by_field: sort.fieldName || 'id',
    order_by: sort.order || 'desc',
    page,
    limit,
  })

  isFetchingInitialData.value = true
  // 设备型号
  if (!isInitParam.value) {
    await termodelStore.fetchItems({skip: 0, limit: 100})
    isInitParam.value = true
  }
  // 文件
  let response = await documentStore.fetchItems(data)
  isFetchingInitialData.value = false

  return {
    data: response.data.data,
    pagination: {
      totalPages: response.data.meta.last_page,
      currentPage: page,
      totalCount: response.data.meta.total,
      limit: limit,
    },
  }
}


</script>
